<template lang="pug">
  ModuleWrapper(title="全州疫苗接种概况" flex="1")
    SectionWrapper(title="疫苗接种人数" flex="unset")
      RealTimeCard(:dataset="rightRealTimeData")
    StaticView.static-item(label="两剂接种完成人口比例"  valueColor="#fa6141"  :value="rightTopContent" icon="nucleic-acid-detection-point")
    SectionWrapper(title="各市/县疫苗接种情况" flex="unset")
    SectionWrapper(title="两剂接种人数对比")
      div.chart-wrap(ref="chartTrend")
    SectionWrapper(title="两剂接种完成人口比例" flex="unset")
      div.rate-wrap
        div.rate-item(v-for="(item, index) in rightAreaData" :key="index"
          ref="rightAreaPrt")
          div.chart-wrap
          div.label {{ item.label }}
</template>

<script>
export default {
  name: "ModuleDetectionSurvey",
  props:{
  	rightAreaData:{
  		type:Array,
  		required:false
  	},
	rightRealTimeData:{
		type:Array,
		required:false
	},
	rightTrend:{
		type:Array,
		required:false
	},
	rightTopContent:{
	  type:String,
	  required:false
	}
  },
  data() {
    return {
      charts: {
        trend: null,
        number: null,
      },
	  zhanbiData: [
        {
          label: '芒市',
          value: 0,
        },
        {
          label: '瑞丽市',
          value: 0,
        },
        {
          label: '盈江县',
          value: 0,
        },
		{
		  label: '陇川县',
		  value: 0,
		},
		{
		  label: '梁河县',
		  value: 0,
		}
	  ],
      zhanbiCharts: {
        numberDuty: null,
        rateList: [],
      }
    }
  },
  watch: {
    rightAreaData: {
      handler() {
        this.rightAreaBind();
      },
      deep: true,
    },
    rightTrend: {
      handler(v) {
        this.renderChart();
      },
      deep: true,
    }
  },
  methods: {
    renderChart() {
	  let rightTrendExt=this.rightTrend;
	  // let topChartX=[];
	  // let topChartY=[];
	  let bottomChartX1=[];
	  let bottomChartX2=[];
		
	  // for(let i=0;i<rightTrendExt.length;i++){
		 //  let dataX=rightTrendExt[i].F0000001;
		 //  dataX=dataX.substring(5,10);
		 //  topChartX.unshift(dataX);
		 //  topChartY.unshift(rightTrendExt[i].F0000003);
	  // }
		  bottomChartX1.push(rightTrendExt[0].F0000006);
		  bottomChartX1.push(rightTrendExt[0].F0000010);
		  bottomChartX1.push(rightTrendExt[0].F0000014);
		  bottomChartX1.push(rightTrendExt[0].F0000018);
		  bottomChartX1.push(rightTrendExt[0].F0000022);
	  
		  bottomChartX2.push(rightTrendExt[0].F0000007);
		  bottomChartX2.push(rightTrendExt[0].F0000011);
		  bottomChartX2.push(rightTrendExt[0].F0000015);
		  bottomChartX2.push(rightTrendExt[0].F0000019);
		  bottomChartX2.push(rightTrendExt[0].F0000023);
		
      this.$nextTick(() => {
        this.charts.trend = this.$echarts.init(this.$refs['chartTrend']);
        this.charts.trend.setOption({
          grid: {
            top: '10%',
            right: '0%',
            left: '0%',
            bottom: '0%',
            containLabel: true,
            show: true,
            borderColor: 'transparent',
            backgroundColor: 'rgba(0, 73, 104, 0.19)'
          },
		  legend: {
			data: ['第一剂', '第二剂'],
		    textStyle: {
			  color: '#ffffff'  // 改变标示文字的颜色
		    },
		  },
          xAxis: {
            type: 'category',
            data: ['芒市', '瑞丽市', '陇川县', '盈江县', '梁河县'],
            splitLine: {
              show: false,
            },
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            }
          },
          series: [{
            // data: [820, 932, 901, 934, 1290, 1330],
			name: '第一剂',
			data: bottomChartX1,
            type: 'bar',
            smooth: true,
            showSymbol: false,
            barWidth: 10,
            itemStyle: {
              color: '#05FDBB',
              width: 5
            },
          },{
            // data: [820, 932, 901, 934, 1290, 1330],
			name: '第二剂',
			data: bottomChartX2,
            type: 'bar',
            smooth: true,
            showSymbol: false,
            barWidth: 10,
            itemStyle: {
              color: '#6699FF',
              width: 5
            },
          }]
        });
      });
    },
	// 全州接种占比
	rightAreaBind() {
	  this.zhanbiCharts.rateList = [];
	  this.rightAreaData.forEach((item, index) => {
	    this.zhanbiCharts.rateList[index] = this.$echarts.init(this.$refs['rightAreaPrt'][index].getElementsByClassName('chart-wrap')[0]);
	    this.zhanbiCharts.rateList[index].setOption({
	      title: {
	        text: `${item.value}%`,
	        left: 'center',
	        top: 'center',
	        textStyle: {
	          color: '#FFF',
	          fontSize: 16,
	        }
	      },
	      tooltip: {
	        show: false,
	        trigger: 'item'
	      },
	      legend: {
	        show: false,
	      },
	      series: [
	        {
	          name: '占比',
	          type: 'pie',
	          radius: ['75%', '100%'],
	          avoidLabelOverlap: false,
	          z: 1,
	          itemStyle: {
	            borderRadius: 10,
	          },
	          label: {
	            show: false,
	            position: 'center'
	          },
	          emphasis: {
	            label: {
	              show: true,
	              fontSize: '40',
	              fontWeight: 'bold'
	            }
	          },
	          labelLine: {
	            show: false
	          },
	          data: [
	            {
	              value: Number(item.value), name: item.label,
	              itemStyle: {
	                normal: {
	                  color: '#05FDBB',
	                }
	              }
	            },
	            {
	              value: (100 - Number(item.value)), name: '',
	              itemStyle: {
	                normal: {
	                  color: 'transparent',
	                }
	              }
	            },
	          ]
	        },
	        {
	          name: '',
	          type: 'pie',
	          radius: ['75%', '100%'],
	          avoidLabelOverlap: false,
	          itemStyle: {
	            normal: {
	              color: 'rgba(255, 255, 255, 0.1)',
	            }
	          },
	          label: {
	            show: false,
	            position: 'center'
	          },
	          labelLine: {
	            show: false
	          },
	          data: [
	            {value: 100, name: ''},
	          ]
	        },
	      ]
	    });
	  });
	}
  },
  mounted() {
    this.renderChart();
  }
}
</script>

<style lang="scss" scoped>
.module{
  flex: 5 !important;;
  display: flex;
  flex-direction: column;
  .content-container{
    padding-top: rem(28);
    flex: 1;
    display: flex;
    flex-direction: column;
    .static-row{
      display: flex;
      margin-bottom: rem(30);
      .static-item{
        flex: 1;
		color: #4AB7BD !important;
		background-color: #F6416C;
      }
	  .bl-css{
		  color: #4AB7BD !important;
	  }
    }
    .block-title{
      margin: rem(30) 0 rem(25);
    }
    .chart-wrap{
      flex: 1;
    }
  }
}
/******后面加的样式******/
.rate-wrap{
  display: flex;
  justify-content: space-between;
  .rate-item{
    .chart-wrap{
      @include square(rem(75));
      margin-bottom: rem(15);
    }
    .label{
      text-align: center;
      color: $base_label_color;
      font-size: rem(18);
    }
  }
}
</style>
